
<template>
	<view class="Box" style="">
		<!-- 网页背景开始 -->
		<view class="pagbg anmt" :style="{backgroundColor:pageBg}"></view>
		<view class="zhongMenu" @click="dianjile()"></view>
		<!-- 网页背景结束 -->
		
		<!-- 菜单开始 -->
		<view class="bottomBox anmt" :style="{color:fontColor,backgroundColor:menuBg,bottom:show?'0':'-150px'}">
			<view style="width: 100%;display: flex;" class="ddd">
				<view @click="mulu()">
					<view><text class="tficon">&#xe671;</text></view>
					<view>目录</view>
				</view>
				<view @click="save(content.book_id,content.content_id)">
					<view><text class="tficon">&#xe671;</text></view>
					<view>保存</view>
				</view>
				<view @click="nextpage(text_id + 1)">
					<view><text class="tficon">&#xe639;</text></view>
					<view>下一章</view>
				</view>
			</view>
		</view>
		<!-- 菜单结束 -->
		
		<!-- 顶部开始 -->
		<view class="anmt" :style="{color:fontColor,lineHeight:statusBarHeight,backgroundColor:show?menuBg:pageBg,position:'fixed',top:'0',left:'0',zIndex:'6',width:'100%',fontSize:'3vw',zIndex:'20'}">
			<!-- 书名章节开始 -->
			<view style="height: 40upx;line-height: 40upx;padding: 0 5vw;">
				<view style="float: left;width: 300upx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" v-text="content.book_name"></view>
				<view v-text="content.content_name" style="float: right;width: 300upx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: right;"></view>
			</view>
			<!-- 书名章节结束 -->
		</view>
		<!-- 顶部结束 -->
		
		<!-- 小说正文开始 -->
		<view class="sview" :style="{paddingTop:'calc('+statusBarHeight+' + 80px)',color:textColor}">
			<rich-text :nodes="content.text"></rich-text>
		</view>
		<!-- 小说正文结束 -->
	</view>
</template>
<script>
	var interval,timeInter,dianliangInter;
import zhuti from '../../zhuti'
export default{
	data(){
		return{
			content: {},
			show:false,//菜单display
			dqzhuti:0,//当前主题
			zhutiList:zhuti.data,//主题列表
			fontColor:'rgb(100,103,120)',//菜单字体颜色
			pageBg:'rgb(247,247,247)',//页面背景色
			menuBg:'#fff',//菜单背景色
			textColor:'#000',//富文本文字颜色
			statusBarHeight: '',
			text_id: 0
		}
	},
	created(e) {
		var this_ = this;
		//获取状态栏高度给顶部占位节点
		var zt = uni.getStorageSync('zhuti');//主题索引
		if(zt){
			this.dqzhuti = zt;
			this.fontColor=zhuti.data[zt].fontColor;//菜单字体颜色
			this.pageBg=zhuti.data[zt].pageBg;//页面背景色
			this.menuBg=zhuti.data[zt].menuBg;//菜单背景色
			this.textColor=zhuti.data[zt].textColor;//富文本文字颜色
		}else{
			this.dqzhuti = 0;
			this.fontColor=zhuti.data[0].fontColor;//菜单字体颜色
			this.pageBg=zhuti.data[0].pageBg;//页面背景色
			this.menuBg=zhuti.data[0].menuBg;//菜单背景色
			this.textColor=zhuti.data[0].textColor;//富文本文字颜色
		}
		uni.getSystemInfo({
			success: res=>{
				this.statusBarHeight = res.statusBarHeight + 'px';
			}
		})
		// console.log("e",e),
		// console.log("text_id",text_id)
	},
	onLoad(e) {
		this.text_id = e.nextid,
		this.getbooktext()
	},
	methods:{
		mulu(){
			// uni.showToast({
			// 	title: '打开目录'
			// });
			uni.redirectTo({
				url:"../content/content"
			})
		},
		back(){
			uni.navigateBack({});
		},
		dianjile(){
			this.show=!this.show;
		},
		nextpage(e){
			uni.redirectTo({
				url:"../booktext/booktext?nextid=" + e
			})
		},
		getbooktext(){
			this.text_id = Number(this.text_id)//直接获取到的e为字符串类型，转换成int
			const db = uniCloud.database()
			const collection = db.collection('book_text')
			let res = collection.where({content_id:this.text_id})
			.get()
			.then(res => {
				console.log(res)
				this.content = res.result.data[0]
			})
		},
		save(e1,e){
			// console.log(e)
			//uni.navigateto有访问层数限制，所以采用uni.redirectTo及时清除已经访问过的界面
			uni.redirectTo({
				url:"../savetextcomplite/savetextcomplite?nextid=" + e1 + "&nowpage=" + e
			})
		},
	}
}
</script>
<style>
	.pagbg{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.back{
		width: 40upx;
		height: 40upx;
		margin: 0 40upx;
	}
	.sview{
		width: calc(100% - 40upx);
		font-size: 45upx;
		line-height: 90upx;
		position: relative;
		text-indent:calc(2em + 12upx);
		margin: 0 auto;
		z-index: 5;
		white-space:normal;
		word-break:break-all;
		word-wrap:break-word;
		overflow: hidden;
		padding: 0 20upx 300upx;
	}
	.bottomBox{
		padding: 0 0 20upx 0;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		opacity: 1;
		z-index: 9;
	}
	.bottomBox .ddd>view{
		width: 100%;
		text-align: center;
		font-size: 24upx;
		line-height: 40upx;
	}
	.bottomBox .ddd image{
		width: 40upx;
		height: 40upx;
	}
	.tficon{
		font-family: ydiconfont;
		font-size: 34upx;
	}
	.anmt{
		transition: all 0.5s;
	}
	.zhongMenu{
		top: 50%;
		position: fixed;
		left: 0;
		width: 100%;
		height: 50%;
		transform: translateY(-50%);
		z-index: 9;
	}
</style>
